import React, { Fragment, useEffect, useState } from "react";
import { Typography, Dropdown, Menu, Button, Input } from "antd";
import { useHistory } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { GlobalOutlined } from "@ant-design/icons";
import { useSelector } from "../../redux/hooks";
import { useDispatch } from "react-redux";
import { languageSlice } from "../../redux/languageChangeAndAdd/languageSlice";
import jwt_decode, { JwtPayload as DefaultJwtPayload } from "jwt-decode";
import { userSlice } from "../../redux/user/userSlice";
import styles from "./Header.module.css";
import logo from "../../assets/logo.svg";
interface JwtPayload extends DefaultJwtPayload {
  username: string;
}

export const Header: React.FC = (props) => {
  const jwt = useSelector((s) => s.user.token);
  const [username, setUserName] = useState<string>("");
  const history = useHistory();
  const language = useSelector((state) => state.languageSlices.language);
  const languageList = useSelector(
    (state) => state.languageSlices.languageList
  );
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const changeLanguage = (el: any) => {
    if (el.key === "new") {
      dispatch(languageSlice.actions.addlanguage({ code: "jp", name: "日语" }));
    } else {
      dispatch(languageSlice.actions.languageChange(el.key));
    }
  };

  // 获取购物车信息
  const shoppingCartItems = useSelector((s) => s.shopingCart.items);
  const loading = useSelector((s) => s.shopingCart.loading);

  // 注销
  const onLogout = () => {
    dispatch(userSlice.actions.logOut());
    // history.push("/");
  };

  useEffect(() => {
    if (jwt) {
      // 解码jwt
      const token = jwt_decode<JwtPayload>(jwt);
      setUserName(token.username);
    }
  }, [jwt]);
  const menu = (
    <Menu onClick={changeLanguage}>
      {languageList.map((item: any) => {
        return <Menu.Item key={item.code}>{item.name}</Menu.Item>;
      })}
      <Menu.Item key="new">添加新的语言</Menu.Item>
    </Menu>
  );
  const params = 123
  return (
    <Fragment>
      <div className={styles["top-header"]}>
        <div className={styles["top-header-left"]}>
          <Typography.Text style={{ margin: "0" }}>
            {t("header.slogan")}
          </Typography.Text>
          <Dropdown.Button
            style={{ marginLeft: 10 }}
            overlay={menu}
            icon={<GlobalOutlined />}
          >
            {language === "zh"
              ? "中文"
              : language === "en"
              ? "英文"
              : language === "jp"
              ? "日语"
              : ""}
          </Dropdown.Button>
        </div>
        {jwt ? (
          <div>
            <span>{t("header.welcome")}</span>
            <Typography.Text strong>{username}</Typography.Text>
            <Button
              loading={loading}
              onClick={() => history.push("/shoppingCart")}
            >
              {t("header.shoppingCart")}({shoppingCartItems.length || 0})
            </Button>
            <Button onClick={onLogout}>{t("header.signOut")}</Button>
          </div>
        ) : (
          <div className={styles["top-header-right"]}>
            <Button onClick={() => history.push("/register")}>
              {t("header.register")}
            </Button>
            <Button onClick={() => history.push("/singIn")}>
              {t("header.signin")}
            </Button>
          </div>
        )}
      </div>
      <div className={styles["main-header"]}>
        <span onClick={() => history.push("/")}>
          <img
            src={logo}
            alt="logo"
            className={styles["App-logo"]}
            style={{ cursor: "pointer" }}
          />
          <Typography.Title
            level={3}
            className={styles.title}
            style={{ cursor: "pointer" }}
          >
            {t("header.title")}
          </Typography.Title>
        </span>
        <Input.Search
          placeholder={"请输入旅游目的地、主题、或关键字"}
          className={styles["search-input"]}
          onSearch={(keywords) => history.push("/search/" + keywords)}
        />
      </div>
      <Menu mode={"horizontal"} className={styles["main-menu"]}>
        <Menu.Item key={1} onClick={() => history.push(`/menuDetail/${params}/${456}/${18}`)}>{t("header.home_page")}</Menu.Item>
        <Menu.Item key={2}>{t("header.weekend")}</Menu.Item>
        <Menu.Item key={3}>{t("header.group")}</Menu.Item>
        <Menu.Item key="4"> {t("header.backpack")} </Menu.Item>
        <Menu.Item key="5"> {t("header.private")} </Menu.Item>
        <Menu.Item key="6"> {t("header.cruise")} </Menu.Item>
        <Menu.Item key="7"> {t("header.hotel")} </Menu.Item>
        <Menu.Item key="8"> {t("header.local")} </Menu.Item>
        <Menu.Item key="9"> {t("header.theme")} </Menu.Item>
        <Menu.Item key="10"> {t("header.custom")} </Menu.Item>
        <Menu.Item key="11"> {t("header.study")} </Menu.Item>
        <Menu.Item key="12"> {t("header.visa")} </Menu.Item>
        <Menu.Item key="13"> {t("header.enterprise")} </Menu.Item>
        <Menu.Item key="14"> {t("header.high_end")} </Menu.Item>
        <Menu.Item key="15"> {t("header.outdoor")} </Menu.Item>
        <Menu.Item key="16"> {t("header.insurance")} </Menu.Item>
      </Menu>
    </Fragment>
  );
};
